<template>
    <a-row>
        <!-- v-userAuth="'G2'" -->
        <a-row class='mytitle'>
            <!-- <router-link :to='{name:"index"}'><a-icon type="arrow-left" style="color:var(--themeColor);margin-right:0.5em" /></router-link> -->
            <!-- <i class="icon icon-user16l title-icon-style"></i> -->
            {{ $t('User-Management') }}
        </a-row>

        <NoAuthPage v-showNoAuth="'G2-1'" />

        <a-row style="margin:1em" v-userAuth="'G2-1'">
            <a-card hoverable>
                <div style="margin:0 0 1em 0 ">
                    <a-button v-userAuth="'G2-2'" type="primary" @click="create = true">
                        <!-- <i class="icon icon-new16f button-icon-style"></i> -->

                        <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>
                        {{ $t('Create') }}
                    </a-button>
                    <a-button v-userAuth="'G2-8'" @click="blacklistModal = true" style="margin-left:1em">
                        <!-- <i class="icon icon-realm16f button-icon-style"></i> -->
                        <Iconfont class="icon button-icon-style" type="icon-realm16f"></Iconfont>
                        {{ $t('Blacklist') }}
                    </a-button>
                    <!-- <a-tooltip placement='bottom' v-userAuth="'G2-2'">
                        <template slot='title'>
                            <span>{{$t('Create')}}</span>
                        </template>
                        <a-button icon='file-add' type="primary" @click="create = true"></a-button>
                    </a-tooltip> -->
                    <!-- <a-tooltip placement='bottom' v-userAuth="'G2-3'">
                        <template slot='title'>
                            <span>{{$t('Edit')}}</span>
                        </template>
                        <a-button :disabled="selectedRowKeys.length==0" type='primary' style="margin-left:1em" icon='form' @click="openmodal('modify')"></a-button>
                    </a-tooltip>
                    <a-tooltip placement='bottom' v-userAuth="'G2-4'">
                        <template slot='title'>
                            <span>{{$t('Delete')}}</span>
                        </template>
                        <a-button :disabled="selectedRowKeys.length==0 || isAdmin" type='danger' style="margin-left:1em" icon='close-circle' 
                            @click="openmodal('deluser')"
                        ></a-button>
                    </a-tooltip> -->
                </div>

                <!-- :rowSelection='{type:"radio",selectedRowKeys:selectedRowKeys,onChange:onSelectChange}' -->
                <a-table class="tabstyle" :columns="columns" :dataSource="userData" size="small"
                    :rowKey="(record) => record.username + record.sources_name" :pagination="pagination" :locale="defaultSetting" bordered>
                    <template slot="role_name" slot-scope="text, record">
                        <!-- 系统默认角色可以翻译 -->
                        <template v-if="roleChEnMap[record.role_id]">
                            <span v-if="$store.state.language == 'zh'">{{ roleChEnMap[record.role_id].ch_name }}</span>
                            <span v-else>{{ roleChEnMap[record.role_id].en_name }}</span>
                        </template>
                        <!-- 自定义的角色 -->
                        <template v-else>{{ text }}</template>
                    </template>
                    <!-- 封锁状态 -->
                    <template slot="block_status" slot-scope="text, record">
                        <!-- 已封锁 -->
                        <div v-if="!record.lock_status">
                            <span class="green-circle"></span><span>{{ $t('Unblocked') }}</span>
                        </div>
                        <!-- 未封锁 -->
                        <div v-else>
                            <span class="red-circle"></span><span>{{ $t('Blocked') }}</span>
                        </div>
                    </template>
                    <!-- 冻结时间 -->
                    <template slot="frozen_time" slot-scope="text, record">
                        <span v-if="record.lock_time">{{ text }}</span>
                        <span v-else>-</span>
                    </template>
                    <!-- 冻结时长 -->
                    <template slot="freeze_duration" slot-scope="text, record">
                        <span v-if="record.lock_duration">{{ text }}{{ $t('Hour') }}</span>
                        <span v-else>-</span>
                    </template>
                    <!-- 操作 -->
                    <template slot="operate" slot-scope="text, record">
                        <a-tooltip placement="bottom" v-userAuth="'G2-3'">
                            <template slot="title">
                                <span>{{ $t('Edit') }}</span>
                            </template>
                            <!-- <i
                                class="icon icon-edit16f table-operation-icon"
                                @click="openModal('modify', record)"
                            ></i> -->

                            <Iconfont class="icon table-operation-icon" type="icon-edit16f"
                                @click="openModal('modify', record)"></Iconfont>
                        </a-tooltip>
                        <a-tooltip v-if="!(record.role_name == '超级管理员' && record.username == 'admin')" v-userAuth="'G2-4'"
                            placement="bottom">
                            <template slot="title">
                                <span>{{ $t('Delete') }}</span>
                            </template>
                            <!-- <i
                                class="icon icon-delete16f table-operation-icon"
                                @click="openModal('deluser', record)"
                            ></i> -->

                            <Iconfont class="icon table-operation-icon" type="icon-delete16f"
                                @click="openModal('deluser', record)"></Iconfont>
                        </a-tooltip>
                        <!-- 解锁 -->
                        <a-tooltip v-userAuth="'G2-6'" placement="bottom" v-if="record.lock_status">
                            <template slot="title">
                                <span>{{ $t('Unlock') }}</span>
                            </template>
                            <!-- <i
                                class="icon icon-unprotect16f table-operation-icon"
                                @click="openModal('lock', record)"
                            ></i> -->

                            <Iconfont class="icon table-operation-icon" type="icon-unprotect16f"
                                @click="openModal('lock', record)"></Iconfont>
                        </a-tooltip>
                        <!-- 加锁 -->
                        <a-tooltip v-userAuth="'G2-5'" placement="bottom" v-if="!record.lock_status">
                            <template slot="title">
                                <span>{{ $t('Lock') }}</span>
                            </template>
                            <!-- <i
                                class="icon icon-protect16f table-operation-icon"
                                @click="openModal('addLock', record)"
                            ></i> -->
                            <Iconfont v-if="record.username == 'admin' && record.sources_name == 'local'" class="icon" type="icon-protect16f" disabled style="margin-right: 15px;"></Iconfont>

                            <Iconfont v-else class="icon table-operation-icon" type="icon-protect16f"
                                @click="openModal('addLock', record)"></Iconfont>
                        </a-tooltip>
                        <!-- 编辑冻结时长 -->
                        <a-tooltip v-userAuth="'G2-7'" placement="bottom" v-if="record.lock_duration">
                            <template slot='title'>
                                <span>{{ $t('Freeze-duration') }}</span>
                            </template>
                            <!-- <i
                                class="icon icon-time16f table-operation-icon"
                                @click="openModal('frozen', record)"
                            ></i> -->
                            <Iconfont class="icon table-operation-icon" type="icon-time16f"
                                @click="openModal('frozen', record)"></Iconfont>
                        </a-tooltip>
                    </template>
                </a-table>
            </a-card>
        </a-row>

        <!-- 新增用户 -->
        <CreateUser :visible="create" :roleArray="roleArray" @updateData="updateData"
            @closeOperateModal="closeOperateModal" />

        <!-- 编辑用户 -->
        <EditUser :visible="modify" :targetUser="onerecord" :roleArray="roleArray" :roleMap="roleMap" :isAdmin="isAdmin"
            @updateData="updateData" @closeOperateModal="closeOperateModal" />

        <!-- 解锁或加锁操作 -->
        <LockOperate :visible="lockModal" :targetUser="onerecord" :unlockType="unlockType" @updateData="updateData"
            @closeOperateModal="closeOperateModal" />

        <!-- 编辑冻结时长 -->
        <FrozenOperate :visible="frozenModal" :targetUser="onerecord" @updateData="updateData"
            @closeOperateModal="closeOperateModal" />

        <!-- 黑名单 -->
        <Blacklist :visible="blacklistModal" @closeOperateModal="closeOperateModal" @handleUnlock="handleUnlock"
            :blackClient="blackClient" />
    </a-row>
</template>
<script>
import EmptyData from '@/components/common/EmptyData'
import NoAuthPage from '@/components/common/NoAuthPage'
import CreateUser from '@/views/manage/userOperate/CreateUser'
import EditUser from '@/views/manage/userOperate/EditUser'
import LockOperate from '@/views/manage/userOperate/LockOperate'
import FrozenOperate from '@/views/manage/userOperate/FrozenOperate'
import Blacklist from '@/views/manage/userOperate/Blacklist'
import request from '@/request/request'

export default {
    name: '',
    components: {
        EmptyData, NoAuthPage,
        CreateUser, EditUser,
        LockOperate, FrozenOperate,
        Blacklist
    },
    data() {
        return {
            columns: [
                { title: this.$t('User') + this.$t('Name'), dataIndex: 'username', key: 'username', ellipsis: true },
                // {title:this.$t('Password'), dataIndex:'password', key:'password', ellipsis: true},
                {
                    title: this.$t('角色'),
                    dataIndex: 'role_name',
                    key: 'role_name',
                    ellipsis: true,
                    scopedSlots: {
                        customRender: 'role_name',
                    },
                },
                { title: this.$t('User') + this.$t('来源'), dataIndex: 'sources_name', key: 'sources_name', ellipsis: true },
                // {title:this.$t('Identity'),dataIndex:'identity',key:'identity',ellipsis: true},
                // {title:this.$t('Extended-attributes'),dataIndex:'xattrs',key:'xattrs'}
                // 封锁状态
                { title: this.$t('Blocking-status'), dataIndex: 'lock_status', key: 'lock_status', ellipsis: true, scopedSlots: { customRender: 'block_status' } },
                // 冻结时间
                { title: this.$t('Frozen-time'), dataIndex: 'lock_time', key: 'lock_time', ellipsis: true, scopedSlots: { customRender: 'frozen_time' } },
                // 冻结时长
                { title: this.$t('Freeze-duration'), dataIndex: 'lock_duration', key: 'lock_duration', ellipsis: true, scopedSlots: { customRender: 'freeze_duration' } },
                { title: this.$t('Operate'), key: 'operate', ellipsis: true, width: 150, scopedSlots: { customRender: 'operate' } },
            ],
            selectedRowKeys: [],
            form1: this.$form.createForm(this),
            form2: this.$form.createForm(this),
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['10', '15', '20'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            formlayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 16 }
            },
            userData: [],
            create: false,
            modify: false,
            target: '',
            onerecord: {},
            num: 0,
            spinning: false,
            defaultSetting: { emptyText: <EmptyData /> },
            roleArray: [
                // {ch_name:'超级管理员', en_name:'Super administrator', value: 0},
                // {ch_name:'系统管理员', en_name:'System administrator', value: 1},
                // {ch_name:'运维人员', en_name:'DevOps personnel', value: 2},
                // {ch_name:'审计人员', en_name:'Auditors', value: 3},
            ],
            roleMap: {},
            roleChEnMap: {
                0: {
                    ch_name: '超级管理员',
                    en_name: 'Super administrator'
                },
                1: {
                    ch_name: '系统管理员',
                    en_name: 'System administrator',
                },
                2: {
                    ch_name: '运维人员',
                    en_name: 'DevOps personnel',
                },
                3: {
                    ch_name: '审计人员',
                    en_name: 'Auditors',
                }
            },
            isAdmin: false,
            isEditPassword: false,
            lockModal: false,
            frozenModal: false,
            blacklistModal: false,
            unlockType: 'user',
            blackClient: []
        }
    },

    mounted() {
        this.getdata();
        this.getRoleData();
        this.getBlackList()
    },

    computed: {
        getlanguage() {
            return this.$store.state.language
        }
    },

    watch: {
        getlanguage(val) {  //监听语言切换，切换data组件内的多语言
            this.columns = [
                { title: this.$t('User') + this.$t('Name'), dataIndex: 'username', key: 'username', ellipsis: true },
                // {title:this.$t('Password'), dataIndex:'password', key:'password', ellipsis: true},
                {
                    title: this.$t('Identity'),
                    dataIndex: 'role_name',
                    key: 'role_name',
                    ellipsis: true,
                    scopedSlots: {
                        customRender: 'role_name',
                    },
                },
                // {title:this.$t('Identity'),dataIndex:'identity',key:'identity',ellipsis: true},
                // {title:this.$t('Extended-attributes'),dataIndex:'xattrs',key:'xattrs'}
                // 封锁状态
                { title: this.$t('Blocking-status'), dataIndex: 'lock_status', key: 'lock_status', ellipsis: true, scopedSlots: { customRender: 'block_status' } },
                // 冻结时间
                { title: this.$t('Frozen-time'), dataIndex: 'lock_time', key: 'lock_time', ellipsis: true, scopedSlots: { customRender: 'frozen_time' } },
                // 冻结时长
                { title: this.$t('Freeze-duration'), dataIndex: 'lock_duration', key: 'lock_duration', ellipsis: true, scopedSlots: { customRender: 'freeze_duration' } },
                { title: this.$t('Operate'), key: 'operate', ellipsis: true, width: 150, scopedSlots: { customRender: 'operate' } },
            ]
        },
    },

    methods: {
        //获取用户表格数据
        getdata() {
            // request('get', this.allurl+'ops/conf/db/user').then(res=>{
            request('get', 'usermanager/').then(res => {
                // console.log('获取用户信息', res)
                if (res.data.flag != 1) {
                    this.userData = res.data
                    this.selectedRowKeys = []
                }
                // this.onerecord = this.userData[this.num]
            })
        },

        //获取用户身份数据
        getRoleData() {
            request('post', 'usermanager/role/getRoleInfoList').then(res => {
                // console.log('获取所有角色类型', res)
                this.roleArray = res.data;
                let roleMap = {};
                res.data.forEach(item => {
                    roleMap[item.role_name] = item.role_id;
                })
                this.roleMap = JSON.parse(JSON.stringify(roleMap));
            })
        },

        // 获取黑名单信息
        async getBlackList() {
            const res = await this.$api.userManage.getBlackListRequest()
            if (res) {
                let blackList = []
                for (let key in res.data) {
                    blackList.push({
                        ip: key,
                        create_time: res.data[key].create_time,
                        times: res.data[key].create_time
                    })
                }
                this.blackClient = blackList
            }
        },

        onSelectChange(selectedRowKeys, selectedRows) {
            // console.log('aaaa',selectedRows)
            // this.target = selectedRowKeys
            // this.selectedRowKeys = selectedRowKeys
            this.target = selectedRowKeys.join('');
            for (let i = 0; i < this.userData.length; i++) {
                if (this.userData[i].id == selectedRowKeys) {
                    this.onerecord = this.userData[i]
                    this.num = i
                }
            }
            if (selectedRows[0].role_name == "超级管理员" && selectedRows[0].username == "admin") {
                this.isAdmin = true;
            } else {
                this.isAdmin = false;
            }
            this.selectedRowKeys = selectedRowKeys
        },

        //提交新增用户
        subnew(e) {
            e.preventDefault();
            this.form1.validateFields((err, value) => {
                if (!err) {
                    this.spinning = true
                    // request('post', this.allurl+'ops/conf/db/user',{
                    request('put', 'usermanager/', {
                        password: value.password,
                        username: value.username,
                        role_id: value.role_name
                        // identity: 'admin',
                    }).then(res => {
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        this.spinning = false
                        this.create = false
                        this.form1.resetFields();
                        this.getdata()
                    }).catch(err => {
                        this.spinning = false;
                        this.create = false;
                        this.form1.resetFields();
                    })
                }
            })
        },

        //提交编辑用户
        submodify(e) {
            e.preventDefault();
            this.form2.validateFields((err, value) => {
                if (!err) {
                    this.spinning = true
                    // request('put', this.allurl+'ops/conf/db/user',{
                    request('post', 'usermanager/update', {
                        id: this.onerecord.id,
                        // addr: value.addr,
                        // identity: 'admin',
                        password: this.isEditPassword ? value.password : undefined,
                        username: value.username,
                        role_id: value.role_name,
                        // xattrs: value.xattrs
                    }).then(res => {
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        this.spinning = false
                        this.modify = false
                        this.form2.resetFields();
                        this.getdata()
                    })
                }

            })
        },
        cancelhandle(e) {
            this.create = false
            this.modify = false
            this.spinning = false
            this.form1.resetFields();
            this.form2.resetFields();
        },
        passwordChange(e) {
            if (this.form1.getFieldValue('xpassword') != '' && this.form1.getFieldValue('xpassword') == e.target.value) {
                this.form1.setFieldsValue({
                    xpassword: e.target.value
                })
            }
        },
        passwordChange2(e) {
            if (this.form2.getFieldValue('xpassword') != '' && this.form2.getFieldValue('xpassword') == e.target.value) {
                this.form2.setFieldsValue({
                    xpassword: e.target.value
                })
            }
        },

        // 确认密码
        compareToFirstPassword1(rule, value, callback, num) {
            const form = this.form1;
            if (value && value !== form.getFieldValue('password')) {
                callback(this.$t('Pwd-error'));
            } else {
                callback();
            }
        },
        validateToNextPassword1(rule, value, callback, num) {
            const form = this.form1;
            if (value && this.confirmDirty) {
                form.validateFields(['confirm'], { force: true });
            }
            callback();
        },

        // 确认密码
        compareToFirstPassword2(rule, value, callback, num) {
            const form = this.form2;
            if (value && value !== form.getFieldValue('password')) {
                callback(this.$t('Pwd-error'));
            } else {
                callback();
            }
        },
        validateToNextPassword2(rule, value, callback, num) {
            const form = this.form2;
            if (value && this.confirmDirty) {
                form.validateFields(['confirm'], { force: true });
            }
            callback();
        },

        //打开弹窗
        openmodal(name) {
            if (this.selectedRowKeys.length != 0) {
                if (name == 'deluser') {
                    // console.log(this.onerecord)
                    if (this.onerecord.role_name == "超级管理员" && this.onerecord.username == "admin") {
                        this.$notification['error']({
                            message: this.$t('Cannot_delete_admin')
                        })
                    } else {
                        this.deluser()
                    }
                } else if (name == 'modify') {
                    if (this.onerecord.role_name == "超级管理员" && this.onerecord.username == "admin") {
                        this.isAdmin = true;
                    } else {
                        this.isAdmin = false;
                    }
                    this.modify = true;
                }
            }
            else {
                this.$notification['error']({
                    message: this.$t('Choose') + this.$t('Operating-object')
                })
            }

        },
        //打开操作弹窗
        openModal(type, record) {
            this.onerecord = JSON.parse(JSON.stringify(record));
            console.log("onr", this.onerecord)
            if (record.role_name == "超级管理员" && record.username == "admin") {
                this.isAdmin = true;
            } else {
                this.isAdmin = false;
            }
            const modalMap = new Map([
                ['modify', () => { this.modify = true; }],
                ['deluser', () => { this.deluser(); }],
                ['lock', () => { this.unlockType = 'user'; this.lockModal = true; }],
                ['addLock', () => { this.unlockType = 'addLock'; this.lockModal = true; }],
                // ['unlock', () => { this.lockModal = true; this.unlockType = 'user';}],
                ['frozen', () => { this.frozenModal = true; }],
            ])
            const action = modalMap.get(type);
            action.call(this)
        },

        //删除用户
        deluser() {
            let _this = this
            this.$confirm({
                title: this.$t('Delete'),
                content: this.$t('Sure-to-del') + _this.onerecord.username + ' ？',
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                onOk() {
                    // request('DELETE', _this.allurl+'ops/conf/db/user',{
                    request('DELETE', 'usermanager/', {
                        // data:{
                        id: _this.onerecord.id,
                        username: _this.onerecord.username,
                        sources_name: _this.onerecord.sources_name,
                        user_type: _this.onerecord.user_type,
                        // }
                    }).then(res => {
                        _this.model(res.data.id) //返回模板
                        _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                        _this.getdata()
                    })
                },
                onCancel() {

                }
            })
        },

        //是否修改密码
        onIsChangePassword(checked) {
            this.isEditPassword = checked;
        },

        //关闭操作弹窗
        closeOperateModal(type) {
            const modalMap = new Map([
                ['create-user', () => { this.create = false; }],
                ['edit-user', () => { this.modify = false; }],
                ['lock-operate', () => { this.lockModal = false; }],
                ['frozen', () => { this.frozenModal = false; }],
                ['blacklist', () => { this.blacklistModal = false; }],
            ])
            const action = modalMap.get(type);
            action.call(this);
        },

        //操作成功后，更新数据
        updateData() {
            if (this.unlockType == 'client') {
                // 更新客户端黑名单
                this.getBlackList();
            } else {
                this.getdata();
            }
        },

        //解锁黑名单IP
        handleUnlock(item) {
            // item.ip
            let obj = item
            this.onerecord = JSON.parse(JSON.stringify(obj));
            this.unlockType = 'client';
            this.lockModal = true;
        },
    },
}
</script>

<!-- 创建用户 -->
<a-modal 
:title="$t('Create')+$t('User')" 
v-model="create" @cancel='cancelhandle' width='35%' 
@ok='subnew' :cancelText="$t('Cancel')" 
:okText="$t('Sure')" :maskClosable='false'
>
<a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
<a-form :form='form1'>
    <a-form-item :label="$t('User')+$t('Name')" v-bind='formlayout'>
          <a-input v-decorator="['username',{
            rules:[{required:true,message:$t('Enter')+$t('User')+$t('Name')},{pattern:namePattern,message: $t('Not_enter_special_characters')}]
        }]" :placeholder="$t('Enter')+$t('User')+$t('Name')">
        </a-input>
    </a-form-item>
    <a-form-item :label="$t('Password')" v-bind='formlayout'>
          <a-input-password v-decorator="['password',{
            rules:[
                {required:true,message:$t('Enter')+$t('Password')},
                {validator: validateToNextPassword1 },
                {pattern:/^[^\s\u4e00-\u9fa5]{6,20}$/,message:$t('Password_rule_prompt')}
            ]
        }]" :placeholder="$t('Enter')+$t('Password')" autocomplete="off" @change="passwordChange">
        </a-input-password>
    </a-form-item>
    <a-form-item :label="$t('Sure')+$t('Password')" v-bind='formlayout'>
          <a-input-password v-decorator="['xpassword',{
            rules:[
                {required:true,message:$t('Confirm_pwd_again')},
                {validator: compareToFirstPassword1, trigger:'blur'},
            ]
        }]" :placeholder="$t('Confirm_pwd_again')" autocomplete="off">
        <!-- {pattern:/^[^\s\u4e00-\u9fa5]{6,20}$/,message:$t('Password_rule_prompt')}  -->
        </a-input-password>
    </a-form-item>
    <!-- <a-form-item label='Addr' v-bind='formlayout'>
          <a-select v-decorator="['addr',{
            rules:[{required:true,message:'请选择Addr'}]
        }]" placeholder='请选择Addr'>
            <a-select-option value='127.0.0.1'>127.0.0.1</a-select-option>
        </a-select>
    </a-form-item> -->
    <!-- 身份 -->
    <a-form-item :label="$t('Identity')" v-bind='formlayout'>
          <a-select v-decorator="['role_name',{
            rules:[{required:true,message:$t('Choose')+ $t('Identity')}]
        }]" :placeholder="$t('Choose')+ $t('Identity')">
            <a-select-option v-for="item in roleArray" :value="item.role_id" :key="item.role_id">
                <!-- {{$store.state.language=='zh' ? item.ch_name : item.en_name}} -->
                {{item.role_name}}
            </a-select-option>
            <!-- <a-select-option value='admin'>{{$t('Admin-identity')}}</a-select-option>
            <a-select-option value='visitor'>{{$t('Visitor')}}</a-select-option>
            <a-select-option value='samba'>samba</a-select-option>注释 -->
        </a-select>
    </a-form-item>
    <!-- <a-form-item :label="$t('Extended-attributes')" v-bind='formlayout'>
          <a-input v-decorator="['xattrs']" :placeholder="$t('Enter') + $t('Extended-attributes')">
        </a-input>
    </a-form-item> -->
</a-form>
</a-modal>

<!-- 编辑用户 -->
<a-modal
:title="$t('Edit')+$t('User')" v-model="modify" 
@cancel='cancelhandle' width='35%'
@ok='submodify'
:cancelText="$t('Cancel')"
:okText="$t('Sure')"
:maskClosable='false'
>
<a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
<a-form :form='form2'>
    <a-form-item :label="$t('User')+$t('Name')" v-bind='formlayout'>
          <a-input v-decorator="['username',{
            rules:[{required:true,message:$t('Enter') + $t('User')+$t('Name')}],initialValue:onerecord.username
        }]" disabled :placeholder="$t('Enter') + $t('User')+$t('Name')">
        </a-input>
    </a-form-item>
    <!-- 身份 -->
    <a-form-item :label="$t('Identity')" v-bind='formlayout'>
          <a-select v-decorator="['role_name',{
            rules:[{required:true,message:$t('Choose')+ $t('Identity')}],
            initialValue:roleMap[onerecord.role_name]
        }]" placeholder="$t('Choose')+ $t('Identity')"
            :disabled="isAdmin"
        >
            <a-select-option v-for="item in roleArray" :value="item.role_id" :key="item.role_id">
                <!-- {{$store.state.language=='zh' ? item.ch_name : item.en_name}} -->
                {{item.role_name}}
            </a-select-option>
            <!-- <a-select-option value='admin'>{{$t('Admin-identity')}}</a-select-option>
            <a-select-option value='visitor'>{{$t('Visitor')}}</a-select-option>
            <a-select-option value='samba'>samba</a-select-option>注释 -->
        </a-select>
    </a-form-item>
    <a-form-item :label="$t('Change-pwd')" v-bind='formlayout'>
        <a-switch @change="onIsChangePassword" />
    </a-form-item>
    <a-form-item :label="$t('Password')" v-bind='formlayout' v-if="isEditPassword">
          <a-input-password v-decorator="['password',{
            rules:[
                {required:true,message:$t('Enter')+$t('Password')},
                {validator: validateToNextPassword2},
                {pattern:/^[^\s\u4e00-\u9fa5]{6,20}$/,message: $t('Password_rule_prompt')}
            ],initialValue:onerecord.password
        }]" :placeholder="$t('Enter')+$t('Password')" @change="passwordChange2">
        </a-input-password>
    </a-form-item>
    <a-form-item :label="$t('Sure')+$t('Password')" v-bind='formlayout' v-if="isEditPassword">
          <a-input-password v-decorator="['xpassword',{
            rules:[
                {required:true,message:$t('Confirm_pwd_again')},
                {validator: compareToFirstPassword2},
            ],initialValue:onerecord.password
        }]" :placeholder="$t('Confirm_pwd_again')">
        <!-- {pattern:/^[^\s\u4e00-\u9fa5]{6,20}$/,message: $t('Password_rule_prompt')} -->
        </a-input-password>
    </a-form-item>
    <!-- <a-form-item label='Addr' v-bind='formlayout'>
          <a-select v-decorator="['addr',{
            rules:[{required:true,message:$t('Confirm_pwd_again') + 'Addr'}],initialValue:onerecord.addr
        }]" disabled :placeholder="$t('Confirm_pwd_again') + 'Addr'">
            <a-select-option value='127.0.0.1'>127.0.0.1</a-select-option>
        </a-select>
    </a-form-item> -->
    <!-- <a-form-item :label="$t('Extended-attributes')" v-bind='formlayout'>
          <a-input v-decorator="['xattrs',{
            initialValue:onerecord.xattrs
        }]" :placeholder="$t('Enter')+ $t('Extended-attributes')">
        </a-input>
    </a-form-item> -->
</a-form>
</a-modal>
